<script lang="ts" setup>
import { queryLikeList } from "../service";
import { IResponseData } from "@/@types/utils.request";
import { formatDate } from "@/utils/formatDate";

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	id: {
		type: Number,
		default: 0,
	},
});

const emit = defineEmits<{
	(e: "update:modelValue", value: boolean): void;
	(e: "refresh", value: boolean): void;
}>();
const visible = computed({
	get() {
		return props.modelValue;
	},
	set(val) {
		emit("update:modelValue", !!val);
	},
});
const articleId = computed(() => props.id);

const viewData = ref<any[]>([]);

const getInfo = async () => {
	try {
		const response: IResponseData<any> = await queryLikeList({
			articleId: articleId.value,
		});
		const { code, msg } = response;
		if (code === 0) {
			viewData.value = response.data;
			console.log(msg);
		}
	} catch (error: any) {
		console.log(error);
	}
};
const onCancel = () => {
	emit("update:modelValue", false);
};
</script>
<template>
	<el-dialog
		v-model="visible"
		title="点赞列表"
		:close-on-press-escape="false"
		top="10vh"
		width="700px"
		@open="getInfo"
		:before-close="onCancel"
	>
		<el-table :data="viewData" style="width: 100%">
			<el-table-column type="index" label="序号" width="55" />
			<el-table-column prop="userNickName" label="发送人昵称" width="180" />
			<el-table-column prop="userPhone" label="手机号码" width="180" />
			<el-table-column prop="createTime" label="点赞时间">
				<template #default="{ row }"> {{ formatDate(row.createTime) }}</template>
			</el-table-column>
		</el-table>
	</el-dialog>
</template>
